/* vue */
import { defineComponent } from "vue"
/* scss */
import '@src/component/business/BizChatBar/operate.scss'

enum BizChatBarOperateEventEnum {
  USE = 'use',
  Retry = 'retry',
  DROP = 'drop',
  SEND = 'send'
}

export default defineComponent({
  name: "BizChatBarOperate",
  props: {
    onUse: {
      type: Function,
    },
    onRetry: {
      type: Function,
    },
    onDrop: {
      type: Function,
    },
    onSend: {
      type: Function,
    }
  },
  data() {
    return {

    }
  },
  computed: {
    
  },
  methods: {
    onUseHandler() {
      this.$emit(BizChatBarOperateEventEnum.USE)
    },
    onRetryHandler() {
      this.$emit(BizChatBarOperateEventEnum.Retry)
    },
    onDropHandler() {
      this.$emit(BizChatBarOperateEventEnum.DROP)
    },
    onSendHandler() {
      this.$emit(BizChatBarOperateEventEnum.SEND)
    },
    renderLeft() {
      return (
        <div class="biz-chat-bar-operate-left">
          {this.renderSendButton()}
          {this.renderUseButton()}
        </div>
      )
    },
    renderSendButton() {
      return (
        <el-button type="primary" onClick={this.onSendHandler}>
          <span>
            直接发送
          </span>
        </el-button>
      )
    },
    renderUseButton() {
      return (
        <el-button onClick={this.onUseHandler}>
          <span>
            编辑
          </span>
        </el-button>
      )    
    },
    renderRight() {
      return (
        <div class="biz-chat-bar-operate-right">
          {this.renderRetryButton()}
          {this.renderDropButton()}
        </div>
      )
    },
    renderRetryButton() {
      return (
        <el-button 
          type="text"
          onClick={this.onRetryHandler}
        >
          <i class="iconfont icon-updete"></i>
          <span>
            换一换
          </span>
        </el-button>
      )
    },
    renderDropButton() {
      return (
        <el-button 
          type="text" 
          class="biz-chat-bar-header-danger-button"
          onClick={this.onDropHandler}
        >
          <i class="iconfont icon-delete"></i>
          <span>
            弃用
          </span>
        </el-button>
      )
    }
  },
  render() {
    return (
      <div class="biz-chat-bar-operate">
        { this.renderLeft() }
        { this.renderRight() }
      </div>
    )
  }
})